<template>
	<view class="container">
		<uni-nav-bar @clickRight="clickRight" @clickLeft="clickLeft"  fixed="true" left-icon="bars" right-icon="search" title="网易云音乐" background-color="#d44439" color="white"></uni-nav-bar>
		<BangDan @jump="jump" :BangDanTuiJian="BangDanTuiJian" title="榜单推荐"></BangDan>
		<GuangFangBang @jump="jump"></GuangFangBang>
		<BangDan @jump="jump" :BangDanTuiJian="BangDanTuiJian2" title="特色榜"></BangDan>
		<BangDan @jump="jump" :BangDanTuiJian="BangDanTuiJian3" title="全球榜"></BangDan>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import BangDan from '../../../components/BangDan/BangDan.vue'
	import GuangFangBang from '../../../components/GuangFangBang/GuangFangBang.vue'
	import {toplist} from '../../../api/paihang/paihang.js'
	export default {
		onLoad(){
			this.toplist()
			this.toplist2()
			this.toplist3()
		},
		methods:{
			clickLeft(){
				uni.navigateTo({
					url:'../../ZuiJinBoFang/ZuiJinBoFang'
				})
			},
			clickRight(){
				uni.navigateTo({
					url:'../../SouSuo/SouSuo'
				})
			},
			jump(id){
				uni.navigateTo({
					url:'../../AllGeDan/AllGeDan?id=' + id + '&num=0'
				})
			},
			toplist(){
				toplist().then(res => {
					this.BangDanTuiJian.push(res.list[22])
					this.BangDanTuiJian.push(res.list[10])
					this.BangDanTuiJian.push(res.list[15])
				})
			},
			toplist2(){
				toplist().then(res => {
					this.BangDanTuiJian2.push(res.list[9])
					this.BangDanTuiJian2.push(res.list[7])
					this.BangDanTuiJian2.push(res.list[5])
				})
			},
			toplist3(){
				toplist().then(res => {
					this.BangDanTuiJian3.push(res.list[15])
					this.BangDanTuiJian3.push(res.list[14])
					this.BangDanTuiJian3.push(res.list[18])
					this.BangDanTuiJian3.push(res.list[19])
					this.BangDanTuiJian3.push(res.list[24])
					this.BangDanTuiJian3.push(res.list[12])
				})
			}
		},
		data() {
			return {
				BangDanTuiJian:[],
				BangDanTuiJian2:[],
				BangDanTuiJian3:[]
			}
		},
		components: {
			uniNavBar,
			BangDan,
			GuangFangBang
		}
	}
</script>

<style lang="scss">
	.container{
		width: 750rpx;
	}
</style>
